<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="__ADMINJS__/plugins/elementui/element-ui/lib/theme-chalk/index.css">
	<script src="__ADMINJS__/plugins/elementui/vue/vue.js"></script>
	<script src="__ADMINJS__/plugins/elementui/element-ui/lib/index.js"></script>
	<style media="screen">
		body > div {
			margin-bottom: 15px;
		}
	</style>
</head>
<body>
	<div id="msgBox">
		<template>
			<el-button type="success" @click="open2">成功</el-button>
			<el-button type="warning" @click="open3">警告</el-button>
			<el-button type="info"    @click="open">消息</el-button>
			<el-button type="danger"  @click="open4">错误</el-button>
		</template>
	</div>
	<div id="natificationBox">
		<template>
			<el-button plain type="success" @click="open3">成功</el-button>
			<el-button round type="warning" @click="open4">警告</el-button>
			<el-button circle type="info" icon="el-icon-message" @click="open5"></el-button>
			<el-button plain type="danger"  @click="open6">错误</el-button>
		</template>
	</div>
	<div id="confirmBox">
		<el-button plain @click="open2">点击打开确认框</el-button>
		<el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
      		<el-button>上边</el-button>
    	</el-tooltip>
	</div>
	<div id="datePickerBox">
		<h5>{{value1}} {{value2}} {{value3}}</h5>
	    <el-date-picker v-model="value1" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
		<el-date-picker v-model="value2" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"></el-date-picker>
		<el-date-picker v-model="value3" type="datetime" placeholder="选择日期时间(时间戳)" value-format="timestamp"></el-date-picker>
	</div>
</body>
<script>
new Vue({
	el: '#msgBox',
	methods: {
		open() {
			this.$message('这是一条消息提示');
		},
		open2() {
			this.$message({
				message: '恭喜你，这是一条成功消息',
				type: 'success'
			});
		},

		open3() {
			this.$message({
				message: '警告哦，这是一条警告消息',
				type: 'warning'
			});
		},

		open4() {
			this.$message.error('错了哦，这是一条错误消息');
		}
	}
})

new Vue ({
	el: '#natificationBox',
	methods: {
		open3() {
			this.$notify({
				title: '成功',
				message: '这是一条成功的提示消息',
				type: 'success'
			});
		},

		open4() {
			this.$notify({
				title: '警告',
				message: '这是一条警告的提示消息',
				type: 'warning'
			});
		},

		open5() {
			this.$notify.info({
				title: '消息',
				message: '这是一条消息的提示消息'
			});
		},

		open6() {
			this.$notify.error({
				title: '错误',
				message: '这是一条错误的提示消息'
			});
		}
	}
})
new Vue({
	el:"#confirmBox",
	methods: {
		open2() {
			this.$confirm('确定还是取消？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$message({
					type: 'success',
					message: '点击了确定!'
				});
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '点击了取消'
				});
			});
		}
    }
})
new Vue({
	el:"#datePickerBox",
	data:function(){
		return {
			value1:"",
			value2:"",
			value3:"",
		}
	}
})
</script>
</html>
